<template>
	<view>
		<!-- 弹窗 -->
		<view class="privacy-bg" catchtouchmove="true">
			<view class="privacy-view">
				<view class="privacy-title">阅读提示</view>
				<view class="privacy-des">
					在使用当前小程序服务之前，请先观看<text class="ad-number">{{adNumber}}</text>次激励视频广告
				</view>
				<button class="privac-btn" @tap="adTap()">
					<view class="privac-btn-video-icon">
						<image class="fengrui-img" src="/static/data/ad_video.svg" mode=""></image>
					</view>
					<view class="">
						广告阅读
					</view>
				</button>
				<button class="privac-btn-no" @tap="noAdTap()">
					<view class="privac-btn-video-icon">
						<image class="fengrui-img" src="/static/down/exit.svg" mode=""></image>
					</view>
					<view class="">
						返回上一页
					</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "showPrivacyAd",
		data() {
			return {
				adNumber:0
			};
		},
		props:{
			adNumber:0
		},
		methods: {
			adTap() {
				// 点击后执行夫级的方法getVideoAd
				this.$emit('getVideoAd')
			},
			noAdTap() {
				this.$emit('tarBlack')
			}
		}
	}
</script>

<style scoped>
	.privacy-bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 9999999;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 40%);
	}

	.privacy-view {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 15%;

	}

	.privacy-title {
		margin: 40rpx auto;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.privacy-des {
		color: #666;
		text-align: center;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.privacy-link {
		color: #07c160;
		line-height: 40rpx;
	}

	.privac-btn {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 80%;
		margin: auto;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.privac-btn-no {
		background-color: #bfbfbf !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 80%;
		margin: auto;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.privac-no {
		text-align: center;
		margin-top: 30rpx;
		color: #666;
		font-size: 26rpx;
	}

	.privac-btn-video-icon {
		height: 46rpx;
		width: 56rpx;
		margin-top: -10rpx;
		margin-right: 16rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		.privacy-bg {
			background: linear-gradient(to bottom, rgba(22, 22, 22, 0) 30%, rgba(22, 22, 22, 1) 40%);
		}
	}

	.ad-number {
		color: red;
		margin: 0 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		/* 替换为放大缩小动画 */
		animation: scaleEffect 2s ease-in-out infinite;
		display: inline-block; 
	}

	@keyframes scaleEffect {
		0%, 100% {
			transform: scale(0.9);
		}
		50% {
			transform: scale(1.1);
		}
	}
</style>